<template>
  <view
    v-if="isShow"
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: #33333390;
      z-index: 65540;
    "
  >
    <view style="animation: loading 2s infinite linear">
      <image :src="loadingImage" style="width: 300rpx; height: 300rpx" />
    </view>
  </view>
</template>
<script>
import loadingImage from "./loading.png";
export default {
  name: "my-loading",
  data() {
    return {
      loadingImage,
    };
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="scss">
@keyframes loading {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>
